import React, { FC, forwardRef, InputHTMLAttributes, ReactElement } from "react";
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import classNames from 'classnames';
import Icon from "../Icon/icon";

type InputSize = 'lg' | 'sm'

export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    disabled?: boolean
    size?: InputSize
    icon?: IconProp,
    prepend?: string | ReactElement
    append?: string | ReactElement
}

export const Input: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
    const { 
        disabled, 
        size, 
        icon, 
        prepend, 
        append,
        style,
        ...restProps
    } = props
    const cnames = classNames('input-wrapper', {
        [`input-size-${size}`]: size,
        'is-disabled': disabled,
        'input-group': prepend || append,
        'input-group-append': !!append,
        'input-group-prepend': !!prepend
    })
    const fixControlledValue = (value: any) => {
    if (typeof value === 'undefined' || value === null) {
        return ''
    }
    return value
    }
    if('value' in props) {
    delete restProps.defaultValue
    restProps.value = fixControlledValue(props.value)
    }
    return (
        <div className={cnames} style={style}>
        {prepend && <div className="input-group-prepend">{prepend}</div>}
        {icon && <div className="icon-wrapper"><Icon icon={icon} title={`title-${icon}`}/></div>}
        <input
          ref={ref}
          className="input-inner"
          disabled={disabled}
          {...restProps}
        />
        {append && <div className="input-group-append">{append}</div>}
      </div>
    )
})

export default Input